@mixin clearfix {
    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

@mixin absCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 媒体查询
/*
0-600    Phone
600-900     Tablet portrait 
900-1200    Tablet landscape
(1200-1800   Normal styles apply)
1800 +      Big Dektop 
*/


// ORDER: Base + typography > general layout + grid > page layout > components

// sass类函数写法处理响应式布局，单位使用em(emmm为什么使用em可自行google查看一些最佳实践与探索)
@mixin respond($breakpoint) {
    @if $breakpoint ==phone {
      @media only screen and (max-width: 37.5em) {
        @content
      }
    }
   
    @if $breakpoint ==tab-port {
      @media only screen and (max-width: 56.25em) {
        @content
      }
    }
  
    @if $breakpoint ==tab-land {
      @media only screen and (max-width: 75em) {
        @content
      }
    }
  
    @if $breakpoint ==big-desktop {
      @media only screen and (min-width: 112.5em) {
        @content
      }
    }
  }